<template lang="pug">
div.product-item
  .icon
    img(:src='model.icon', width='57')
  .content
    h2.name(@click="$router.push({name: 'sorts:detail', params: {id: model.id, aId: 0}})") {{model.title}}
    p.desc(v-html="model.label||'&nbsp;'")
    .extra
      span.count 月售: {{model.sales}}
      span.count 好评: {{model.likes}}
    .price
      span.now ￥{{model.price}}
      span.old(v-show='model.oldPrice') ￥{{model.oldPrice}}
    .cartControl-wrapper
      span(@click="plusHandler") +
</template>

<script>
export default {
  props: {
    model: {
      type: Object,
      default: {
        title: '雀巢墙固QG300',
        label: '混泥土界面处理剂',
        price: 33.00
      }
    }
  },
  methods: {
    plusHandler () {
      this.$emit('plus', this.model)
    }
  }
}
</script>
<style lang="stylus" scoped>
.product-item
  position: relative
  display: flex
  border-.1px(rgba(7, 17, 27, 0.1))
  text-align: left
  width: 100%
  border-bottom: .0025rem solid #eee
  &:last-child
    border-none()
    margin-bottom: 0rem
  .icon
    flex: 0 0 2.5625rem
    margin: .225rem
    width: 1.5625rem
    height: 2.3625rem
    background-color: #ccc
    border-radius: .1rem
    overflow: hidden
    img
      width: 100%
      height: 100%
  .content
    flex: 1
    .name
      margin: .125rem 0 .2rem 0
      font-size: .375rem 
      line-height: .55rem
      color: rgba(7, 17, 27, .7)
      cursor: pointer
    .desc, .extra
      font-size: .325rem
      line-height: .325rem
      color: rgb(147, 153, 159)
    .desc
      margin-bottom: .3rem
      line-height: .35rem
    .extra
      .count
        margin-right: .45rem
    .price
      line-height: 1rem
      .now
        font-size: .475rem
        color: rgb(240, 20, 20)
      .old
        font-size: .425rem
        color: rgb(147, 153, 159)
        text-decoration: line-through
    .cartControl-wrapper
      position: absolute
      right: .4rem
      bottom: .25rem
      span
        color: #fff
        cursor: pointer
        background: #f04e4f
        border-radius: 50%
        display: inline-block
        padding: .1rem
        display: inline-block
        width: .5rem
        height: .5rem
        text-align: center
        line-height: .34rem
</style>
